<#assign ctx=request.contextPath />
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>大表定位及脉冲</title>
    <link rel="stylesheet" href="${ctx}/css.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.10&key=9b29a6048cb5ef7de6f503dc38e32d0c&plugin=AMap.ToolBar"></script>
    <!-- 加载远程定位脚本 -->
    <script type="text/javascript" src="${ctx}/remogeo.js"></script>
    <script type="text/javascript" src="${ctx}/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="top">
    <a href="${ctx}/hello" class="backtrack"><img src="${ctx}/0.png"></a>
    <a href="javascript:history.back();" class="return"><img src="${ctx}/12.png"></a>
    <div class="box">
        大表定位及脉冲
    </div>
</div>
<div class="empty"></div>
<form id="frm1" action="${ctx}/setupMeter/commitHistoryPulse/${task.id}" method="post">
    <table class="list_box">
        <tr>
            <td class="lo_3">水表ID</td>
            <td class="lo_4">
                ${(meter.meterId)!""}
            </td>
        </tr>
        <tr>
            <td class="lo_3">表名</td>
            <td class="lo_4">
                ${(meter.meterName)!""}
            </td>
        </tr>
        <tr>
            <td class="lo_3">表号</td>
            <td class="lo_4">
                ${(meter.meterCode)!""}
            </td>
        </tr>
        <tr>
            <td class="lo_3">户号</td>
            <td class="lo_4">
                ${(meter.userCode)!""}
            </td>
        </tr>
        <tr>
            <td class="lo_3">数据ID</td>
            <td class="lo_4">
                <input name="extId" value="${(meter.extId)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">水表口径</td>
            <td class="lo_4">
                <input name="meterSize" value="${(meter.meterSize)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">脉冲比</td>
            <td class="lo_4">
                <input title="脉冲比" type="text" name="meterPulse" value="${(meter.meterPulse)!""}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">安装时间</td>
            <td class="lo_4">
                <input name="installDate" value="${(meter.rtuInstallDate?string("yyyy-MM-dd HH:mm:ss"))!}" class="flow lo_5">
            </td>
        </tr>
        <tr>
            <td class="lo_3">所归水司</td>
            <td class="lo_4">
                ${(meter.firmName)!""} (${(meter.firmId)!""})
            </td>
        </tr>
        <tr>
            <td class="lo_3">安装位置
                <h4 id='status'></h4>
                <hr>
                <p id='result'></p>
            </td>
            <td class="lo_4">

                <div id="map1" class="map" style="height: 200px;"></div>
                <input type="hidden" id="meterLoc" name="meterLoc" value="${(meter.meterLoc)!""}">

                <script>
                    // wkt: POINT(39.984335 116.310097)
                    var z = document.getElementById("meterLoc").value;
                    if (z) {
                        function a() {
                            var firstLeftIndex = z.lastIndexOf('(');
                            var lastRightIndex = z.indexOf(')');
                            // 去掉首尾括号
                            var str = z.substring(firstLeftIndex + 1, lastRightIndex);
                            var arr = str.split(" ");
                            return arr;
                        };

                        var attrs = a();
                        var lng = parseFloat(attrs[1])
                        var lat = parseFloat(attrs[0])
                        // 中国地区，总是: 经度>纬度
                        if (lng < lat) {
                            var tmp = lng;
                            lng = lat;
                            lat = tmp;
                        }

                        var map = new AMap.Map("map1", {
                            zoom: 18,
                            center: [lng, lat]
                        });
                        var marker = new AMap.Marker({
                            map: map,
                            position: [lng, lat],
                            label: {
                                offset: new AMap.Pixel(-40, 35),//修改label相对于maker的位置
                                content: "点击大表图标打开高德地图"
                            }
                        })
                        marker.on('click', function (e) {
                            marker.markOnAMAP({
                                name: '大表图标',
                                position: marker.getPosition()
                            })
                        })
                    }
                </script>
            </td>
        </tr>
        <tr>
            <td class="lo_3">
                照片1
            </td>
            <td class="lo_4"><input type="file" name="findPhoto1"></td>
        </tr>
        <tr>
            <td class="lo_3">
                照片2
            </td>
            <td class="lo_4"><input type="file" name="findPhoto2"></td>
        </tr>
        <tr>
            <td class="lo_3">
                照片3
            </td>
            <td class="lo_4"><input type="file" name="findPhoto3" style="margin:0 auto;"></td>
        </tr>

        <tr>
            <td colspan="2" class="lo_3">历史脉冲</td>
        </tr>
        <#list pulseList as p1>
        <tr>
            <td class="lo_3">脉冲比 ${p1.meterPulse!""}</td>
            <td class="lo_4">
            行数：${p1.oldCount!""}, 时间: ${((p1.startTime)?datetime)!} ~ ${((p1.endTime)?datetime)!}.<br/>
            </td>
        </tr>
        </#list>

        <tr>
            <td class="lo_3">确认脉冲比</td>
            <td class="lo_4">
                <input type="checkbox" name="changeConfirm" title="调整历史脉冲比" class="flow lo_5">
            </td>
        </tr>

        <tr>
            <td class="lo_3">确认坐标</td>
            <td class="lo_4">
                <input type="checkbox" name="changeLocConfirm" title="调整大表坐标" class="flow lo_5">
            </td>
        </tr>

        <tr>
            <td class="lo_3">创建同名DMA分区</td>
            <td class="lo_4">
                <input type="checkbox" name="createSameDma" title="创建同名DMA分区" class="flow lo_5">
            </td>
        </tr>

        <tr>
            <td class="lo_3">提交</td>
            <td class="lo_4"><input type="submit" value="  提交 " class="affirm_1"></td>
        </tr>

    </table>
</form>
</body>
</html>
